<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2018/12/4</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <!--好的代码像粥一样,是得用时间和精力熬的。-->
</head>
<body>
    <div id="root">
        <h1 v-for="(item,key) in arr" v-on:click="clickToDel(key)">{{item}}</h1>
    </div>
</body>
<script>
    // 原生js或jq 直接操作dom 事件驱动 视图变化
    // 不允许直接操作dom 提倡操作数据模型
    // 数据驱动视图变化的框架
    // 核心 指令【vue合法高性能操作dom的封装】 v-for  v-on
    // var arr = [1,2,3,4,5,6,7,8,9];
    [1,2,3].forEach(function (item,key) {});
    let config = {
        el:'#root',//vue所管辖范围
        data:{
            arr:[1,2,3,4,5,6,7,8,9]
        },//数据类型
        methods:{
            clickToDel(index){
                this.arr.splice(index,1);
            }
        }//方法 事件绑定
    };
    let app = new Vue(config);
</script>
</html>
